<template>
  <div class="box">
    <div class="topBar">
      <div class="topBox">
        <div class="zj">
          <span class="zjTitle">债券信息</span>
          <span class="zjInput" @click="zjFn">{{ bondInfo.bondFname }}</span>
        </div>
        <div class="searchBtn">
          <el-button type="primary" class="btn" @click="clearFn"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 债券信息 -->
      <div class="bondCard">
        <div class="bondCardTitle">债券信息</div>
        <div class="info">
          <div style="flex: 1">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">债券全称</span
              ><span class="infoItemVal">{{ bondInfo.bondFname }}</span>
            </div>
            <div style="display: flex">
              <div style="flex: 1; margin-bottom: 20px">
                <span class="infoItemLabel">债券编码</span
                ><span class="infoItemVal">{{ bondInfo.bondId }}</span>
              </div>
              <div style="flex: 1">
                <!-- <span class="infoItemLabel">发行规模</span><span class="infoItemVal">{{ bondInfo.issueAmount * 10000 ||
                    ''
                }}万元</span> -->
                <span class="infoItemLabel">发行规模</span
                ><span class="infoItemVal"
                  >{{ (bondInfo.issueAmount * 10000) | filterNum }}元</span
                >
              </div>
            </div>
            <div style="display: flex">
              <div style="flex: 1">
                <span class="infoItemLabel">债券简称</span
                ><span class="infoItemVal">{{ bondInfo.bondSname }}</span>
              </div>
              <div style="flex: 1">
                <span class="infoItemLabel">债券类型</span
                ><span class="infoItemVal">{{ bondInfo.bondType }}</span>
              </div>
            </div>
          </div>
          <div class="infoItem">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">发行日</span
              ><span class="infoItemVal">{{ bondInfo.issueDate }}</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">起息日</span
              ><span class="infoItemVal">{{ bondInfo.effDate }}</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">兑付日</span
              ><span class="infoItemVal">{{ bondInfo.maturityDate }}</span>
            </div>
          </div>
          <div class="infoItem">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">期限（天）</span
              ><span class="infoItemVal">{{ bondInfo.termDays }}</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">发行价</span
              ><span class="infoItemVal">{{ bondInfo.issuerPrice }}元</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">发行利率(%)</span
              ><span class="infoItemVal">{{ bondInfo.issueCouponRate }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <div class="tableBoxChild">
          <el-table :data="tableData">
            <el-table-column label="序号" align="center" type="index">
            </el-table-column>
            <el-table-column prop="customerId" label="客户编码" align="center">
            </el-table-column>
            <el-table-column prop="customerNm" label="客户名称" align="center">
            </el-table-column>
            <el-table-column
              prop="assessMethod"
              label="推荐规则"
              align="center"
            >
            </el-table-column>
            <el-table-column label="推荐指数" align="center" :formatter="glFn">
            </el-table-column>
            <el-table-column prop="comments" label="说明" align="center">
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
    <el-drawer
      ref="drawer"
      title="请选择债券信息"
      size="80%"
      :visible.sync="drawer"
      direction="btt"
      :append-to-body="true"
      :destroy-on-close="true"
      custom-class="drawer-table"
    >
      <div>
        <el-form :inline="true" :model="bondInfoForm">
          <el-form-item label="债券名称">
            <el-input v-model="bondInfoForm.bondSname" clearable></el-input>
          </el-form-item>
          <el-form-item label="债券ID">
            <el-input v-model="bondInfoForm.bondId" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="bondInfoSubmit" class="btn"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="singleTable"
          :data="searchList"
          :highlight-current-row="true"
          style="width: 100%"
          @row-click="bondRowClick"
        >
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column property="bondId" label="债券ID" align="center">
          </el-table-column>
          <el-table-column property="bondSname" label="债券简称" align="center">
          </el-table-column>
          <!-- <el-table-column property="bondFname" label="债券全称" align="center">
          </el-table-column>
          <el-table-column property="bondType" label="债券类型" align="center">
          </el-table-column> -->
        </el-table>
        <el-pagination
          small
          style="text-align: right; margin-right: 20px; margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="bondTotal"
          @current-change="bondPageFn"
        >
        </el-pagination>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getBond } from "@/api/common/index.js";
import {
  queryBondProbabilityDetail,
  newBondInfo,
} from "@/api/recommendationSystem/index.js";
export default {
  data() {
    return {
      drawer: false,
      searchList: [],
      tableData: [],
      searchInput: "",
      bondInfo: {},
      total: 0,
      count: "",
      page: 1,
      bondTotal: 0,
      bondInfoForm: {
        bondSname: "",
        bondId: "",
      },
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  mounted() {},
  methods: {
    clearFn() {
      this.bondInfo = {};
    },
    bondInfoSubmit() {
      const param = {
        ...this.bondInfoForm,
        pn: 10,
        page: 1,
      };
      this.newBondInfo(param);
    },
    glFn(row) {
      return row.assessRate;
      // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
    },
    zjFn() {
      this.drawer = true;
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: 1,
      };
      this.newBondInfo(param);
    },
    bondRowClick(row) {
      this.drawer = false;
      const param = {
        bondName: row.bondName,
        bondId: row.bondId,
        pn: 10,
        page: 1,
      };
      getBond(param).then((res) => {
        this.bondInfo = res.data.result[0];
      });
      queryBondProbabilityDetail({
        bondId: row.bondId,
        page: 1,
        pn: 10,
      }).then((res) => {
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    bondPageFn(page) {
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: page,
      };
      this.newBondInfo(param);
    },
    pageFn(currentPage) {
      queryBondProbabilityDetail({
        bondId: this.bondInfo.bondId,
        page: currentPage,
        pn: 10,
      }).then((res) => {
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    newBondInfo(param) {
      const _this = this;
      newBondInfo(param).then((res) => {
        _this.searchList = res.data.result;
        _this.bondTotal = Number(res.data.totalResults);
      });
    },
    clickFn(v, i) {
      this.clearFn();
      this.count = i;
      this.bondInfo = {
        ...v,
      };
      queryBondProbabilityDetail({
        bondId: v.bondId,
        page: this.page,
        pn: 10,
      }).then((res) => {
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.box {
  .topBar {
    min-height: 80px;
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .topBox {
    display: flex;

    span {
      display: inline-block;
    }

    .searchBtn {
      margin-left: 20px;
    }

    .zj {
      margin-left: 20px;
    }

    .khTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }

    .khInput,
    .zjInput {
      height: 30px;
      line-height: 30px;
      width: 200px;
      overflow: hidden;
      border: 1px solid rgba(126, 163, 255, 0.3);
      color: #ffffff;
      background-color: #363657;
      border-radius: 3px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      padding: 0px 10px;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .zjTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }
  }

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .searchList {
    padding-top: 10px;
    height: 700px;
    overflow: scroll;
    padding-left: 10px;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;

    .info {
      display: flex;
      padding: 20px 20px;
    }

    .infoItem {
      width: 300px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }

    .infoItemLabel {
      margin-right: 30px;
      font-size: 14px;
    }
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .tableBoxChild {
    min-height: 500px;
  }

  .el-pagination {
    text-align: right;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
</style>
